<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@include file="/commons/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<fmt:bundle basename="res">
<head>
    <meta charset="utf-8">
    <title><fmt:message key='lb' /></title>
    <jsp:include page="/WEB-INF/commons/commons-header.jsp" flush="true"/>
    <style>
        html {
            background: #fff;
        }

        .layui-container {
            width: 1300px;
        }
    </style>
</head>
<body>
<div class="layui-fluid">

    <form:form commandName="billLading" method="${_method }" class="layui-form" id="form">
        <input type="hidden" name="_method" value="${_method }"/>
        <form:hidden path="id"/>
        <form:hidden path="supplier.id" value="${supplierId}"/>

        <div class="layui-card">
            <div class="layui-field-box layui-form">

                <table class="layui-table" lay-size="sm">
                    <thead>
                    <th style="border-color: black;"><fmt:message key='bh' /></th>
                    <th style="border-color: black;"><fmt:message key='sptp' /></th>
                    <th style="border-color: black;"><fmt:message key='spmc' /></th>
                    <th style="border-color: black;">SKU</th>
                    <th style="border-color: black;"><fmt:message key='ycsl' /></th>
                    <th style="border-color: black;"><b style="color:red;">* <fmt:message key='thsl' /> </b></th>
                    </thead>
                    <c:forEach items="${details}" var="detail">
                        <tr>
                            <td style="border-color: black;">${detail.sku.code}</td>
                            <td style="border-color: black;"><img class="preview" style="width:40px;" src="${store_domain}/uploads/${detail.goods.defaultImage}"/></td>
                            <td style="border-color: black;">${detail.goods.name}</td>
                            <td style="border-color: black;">${detail.sku.skuNames}</td>
                            <td style="border-color: black;">${detail.quantity}</td>
                            <td style="border-color: black;"><input type="text" class="layui-input feijin-quantity" data-quantity="${detail.quantity}" data-id="${detail.id}"/></td>
                        </tr>
                    </c:forEach>
                </table>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='shrxm' /></label>
            <div class="layui-input-inline">
                <form:input path="deliveryName" lay-verify="required" class="layui-input"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='shrdh' /></label>
            <div class="layui-input-inline">
                <form:input path="deliveryMobile" lay-verify="required" class="layui-input"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='shdz' /></label>
            <div class="layui-input-inline" style="width: 100px;">
                <select id="merchantEnterpriseInfo-province" name="deliveryProvince" lay-filter="merchantEnterpriseInfo-province">
                    <option value="" data_id=""><fmt:message key='qxzs' /></option>
                </select>

            </div>

            <div class="layui-input-inline" style="width: 100px;">
                <select id="merchantEnterpriseInfo-city" name="deliveryCity" lay-filter="merchantEnterpriseInfo-city">
                    <option value="" data_id=""><fmt:message key='qxzx' /></option>
                </select>

            </div>

            <div class="layui-input-inline" style="width: 100px;">
                <select id="merchantEnterpriseInfo-area" name="deliveryArea">
                    <option value="" data_id=""><fmt:message key='qxzq' /></option>
                </select>

            </div>

            <div class="layui-input-inline">
                <form:input path="deliveryAddress" lay-verify="required" class="layui-input"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><fmt:message key='thdbz' /></label>
            <div class="layui-input-inline">
                <form:textarea path="note" class="layui-input" style="height:100px;"/>
            </div>
        </div>

        <div class="layui-input-block">

            <input type="hidden" id="data" name="data"/>

            <div style="display: none"><input type="button" value="保存" class="layui-btn" id="submit" lay-filter="submit" lay-submit></div>
        </div>

    </form:form>
</div>
<script type="text/javascript" src="${web_domain}/resources/plugins/region2.0.js"></script>
<script>


    layui.use(['form', 'laydate'], function () {

        var form = layui.form;

        form.on('submit(submit)', function (data) {

            var data = [];
            var msg = "";

            $(".feijin-quantity").each(function (index, item) {
                var id = $(item).attr("data-id");
                var quantity = $(item).val();
                var oldQuantity = $(item).attr("data-quantity");

                if (quantity > oldQuantity) {
                    msg = "<fmt:message key='thdyc' />";
                }

                if (quantity > 0) {
                    data.push(id + ":" + quantity);
                }

            });

            if (msg !== "") {
                layer.msg(msg);
                return false;
            }

            if (data.length != 0) {

                $("#data").attr("value", data.join(";"));

                $("#form").ajaxSubmit({
                    success: function (result) {
                        if (result.status) {
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                            parent.$("#search").click();
                        } else {
                            layer.msg(result.message);
                        }
                    }
                });
            } else {
                layer.msg("<fmt:message key='thslzs' />");
            }


        });

    });

    $(function () {
        var merchantEnterpriseInfonames = ["merchantEnterpriseInfo-province", "merchantEnterpriseInfo-city", "merchantEnterpriseInfo-area"];
        var merchantEnterpriseInfovalues = ["", "", ""];
        region($, merchantEnterpriseInfonames, merchantEnterpriseInfovalues);

//        $("#merchantEnterpriseInfo-area").change(function () {
//
//            alert($("#merchantEnterpriseInfo-province").val() + $("#merchantEnterpriseInfo-city ").val() + $("#merchantEnterpriseInfo-area").val());
//
//        });

    });

</script>
</body>
</fmt:bundle>
</html>
